<template>
    <div>
      <div class="imgBox">
        <div class="person">
          <div>
            <van-swipe :autoplay="3000" class="">
              <van-swipe-item v-for="(item,index) in goods_img" :key="index">
                <img :src="item.img_url" alt="" style="width:100vw;height:68vw">
              </van-swipe-item>
            </van-swipe>
            <div>
            <div style="padding:4vw 4vw;overflow:hidden;border-bottom:1px solid #CECECE;background: #fff;">
              <div class="headIcon">
                <img :src="head_ico" alt="">
              </div>
              <div class="userMsg">
                <p style="font-size:12px;color:#333333;">{{user_name}}</p>
                <p style="font-size:11px;color:#666666;">{{create_time}}</p>
              </div>
              <div class="isCare">
                <div class="focus" @click="router">关注</div>
                <!--<div class="focus" v-if="focu" v-on:click="focus">关注</div>
                <div class="focused" v-else v-on:click="focused">已关注</div>-->
              </div>
            </div>


            </div>
          </div>

        </div>
      </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
    export default {
      name: "articleTop",
      props:["goods_img","user_name","create_time","head_ico","is_care"],
      data(){
        return{
          focu:true,
        }
      },
      methods:{
        focus:function(){
          this.focu = !this.focu;
        },
        focused:function(){
          this.focu = !this.focu;
        },
        router(){
           Dialog.confirm({
            message: '是否前往app操作'
          }).then(() => {
            window.location.href="http://www.napin.com/download.html"
          }).catch(() => {
            // on cancel
          });
        }

      },
      mounted(){
        this.focu=this.is_care
      }
    }
</script>

<style scoped lang="scss">
.imgBox{
  height:62.93vw;
  width:100vw;
}
.person{
  width:100vw;
  height:16vw;
  margin-top:-2vw;
  border-bottom:1px solid #cecece;
  display:inline-block;
}
.infomation{
  float:left;
  margin-left:4vw;
}
.infomation div{
  float:left;
  margin-top:3.8vw;
  margin-left:1.87vw;
}
.headIcon{
  width:8vw;
  height:8vw;
  margin-top: 2vw;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  img{
    width:100%;
    height:100%
  }
}
.userMsg{
  float:left;
  margin-left: 1.87vw;
  vertical-align: middle;

}
.isCare{
  float:right;
  margin-top:5px;
}
  .focused{
    height:8vw;
    width:16vw;
    border:1px solid #FF4C50;
    color:#ff4c50;
    text-align:center;
    line-height:8vw;
    font-size:12px;
    float:right;
    border-radius:4px;
  }
.focus{
  height:8vw;
  width:16vw;
  background:#FF4C50;
  color:#fff;
  text-align:center;
  line-height:8vw;
  font-size:12px;
  float:right;
  border-radius:4px;
}
.articleContent{
  width:100vw;
  height:54.13vw;
  border-bottom:1px solid #cecece;
  font-size:15px;
}
.articleContent p{
  margin:0px auto;
  width:87.73vw;
  height:48.13vw;
  margin-top:3vw;
  overflow:hidden;
}
</style>
